<template>
  <div class="contentbox">
    <!-- 返回顶部 -->

    <el-backtop :bottom="100" />
    <!-- 顶部操作框 -->
    <div class="top">
      <el-input
        placeholder="请输入搜索内容"
        v-model="query"
        clearable
        class="query"
      >
      </el-input>
      <el-select v-model="value" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        icon="el-icon-search"
        class="search"
        @click="search"
      ></el-button>
    </div>

    <div
      class="item animated fadeInDown"
      v-for="(item, index) in itemcontent"
      :key="index"
    >
      <div class="zhen">
        <img src="../assets/image/zhen.png" alt="" />
      </div>
      <!-- <el-button>Top center</el-button> -->

      <div class="header">
        <el-popover placement="right" width="200" trigger="hover">
          <div class="userInfo">
            <div class="userid"><span>学号:</span>{{ useinfo.id }}</div>
            <div class="userid"><span>用户名:</span>{{ useinfo.name }}</div>
            <div class="userid"><span>年龄:</span>{{ useinfo.age }}</div>
            <div class="userid"><span>性别:</span>{{ useinfo.sex }}</div>
            <div class="userid"><span>电话:</span>{{ useinfo.phone }}</div>
            <div class="userid"><span>邮箱:</span>{{ useinfo.email }}</div>
          </div>

          <div class="img" slot="reference" @mouseover="findinfo(item.author)">
            <!-- <img :src="item.userimg" alt="" /> -->
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="item.userimg"
            ></el-avatar>
          </div>
        </el-popover>

        <div class="info">
          <div class="name">
            {{ item.author }}
          </div>
          <div class="tiewentime">
            {{ item.time }}
          </div>
        </div>
      </div>
      <div class="content">
        <span class="title" title="贴文标题" v-if="item.title != ''"
          >[{{ item.title }}]</span
        >{{ item.content }}
        <div style="margin-top:20px;margin-left:5px" v-if="item.img != null">
          <el-image
            style="height:200px;"
            :src="item.img"
            fit="fill "
          ></el-image>
        </div>
      </div>
      <div class="footer">
        <div
          class="operation"
          @click="dianzan(item.id, item.display, item.zan)"
        >
          <span
            class="iconfont icon-dianzan icon"
            :class="{ show: item.display }"
          ></span>
          <i>{{ item.zan }}</i>
        </div>

        <div class="operation" @click="commented(item.id)">
          <!-- <el-tooltip
            class="item"
            effect="dark"
            content="Top Left 提示文字"
            placement="top-center"
          >
       
          </el-tooltip> -->
          <span class="el-icon-chat-dot-square icon"></span>
        </div>
      </div>
      <div class="line"></div>
      <div class="comments">
        <ul>
          <li
            v-for="(commentItem, index) in item.tiewencommentsList"
            :key="index"
          >
            <span
              v-if="commentItem.username != ''"
              style="margin-right:6px;font-weight:650;font-size:13px"
              >{{ commentItem.username }} :
            </span>
            <span
              v-if="commentItem.content != ''"
              style="color:gray;font-size:13px"
              >{{ commentItem.content }}</span
            >
          </li>
        </ul>
      </div>
    </div>
    <el-empty description="目前还没有您要搜的贴文哦" v-if="show"></el-empty>
    <el-button
      @click="addtiewenvisible = true"
      class="add icon el-icon-s-promotion"
      >发帖</el-button
    >
    <!-- 发贴文的页面 -->
    <el-dialog
      title="发布贴文"
      :visible.sync="addtiewenvisible"
      width="40%"
      :before-close="handleClose"
      top="300px"
    >
      <el-input
        type="textarea"
        :rows="1"
        placeholder="请输入贴文的标题"
        v-model="tiewen.title"
        style="margin-bottom:10px"
      >
      </el-input>
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入贴文的内容"
        v-model="tiewen.content"
      >
      </el-input>
      <div class="operation1">
        <div class="extra">
          <!-- <span class="expression">表情</span> -->
          <el-popover
            placement="top"
            width="500"
            height="400"
            trigger="manual"
            v-model="faceshow"
          >
            <template #reference>
              <el-button class="face" @click="faceshow = !faceshow"
                >😀</el-button
              >
            </template>
            <div class="browBox">
              <ul class="faceList">
                <li
                  v-for="(item, index) in faceList"
                  :key="index"
                  @click="getBrow2(index)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </el-popover>
          <el-upload
            action="http://localhost:8090/fileload"
            list-type="picture"
            :on-success="uploadover"
          >
            <el-tag>上传图片</el-tag>
          </el-upload>
          <!-- <Face></Face> -->
        </div>

        <div class="send" @click="add" :disabled="tiewen.content == ''">
          发布
        </div>
      </div>
    </el-dialog>
    <!--评论界面 -->
    <el-dialog
      title="评论"
      :visible.sync="commentvisible"
      width="40%"
      :modal="false"
      top="300px"
      :show-close="false"
      :before-close="closedialog"
    >
      <!-- <el-card class="footer"> -->
      <el-input
        type="textarea"
        :rows="3"
        placeholder="请输入您的评论内容"
        v-model="comment"
      >
      </el-input>
      <div class="operation1">
        <div class="extra">
          <!-- <span class="expression">表情</span> -->
          <el-popover
            placement="top"
            width="500"
            height="1000"
            trigger="manual"
            v-model="faceshow"
          >
            <template #reference>
              <el-button class="face" @click="faceshow = !faceshow"
                >😀</el-button
              >
            </template>
            <div class="browBox">
              <ul class="faceList">
                <li
                  v-for="(item, index) in faceList"
                  :key="index"
                  @click="getBrow(index)"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </el-popover>
        </div>
        <div class="send" @click="send" :disabled="comment == ''">
          评论
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const appData = require("../assets/faceList.json");
export default {
  data() {
    return {
      show: false,
      itemcontent: [],
      commentvisible: false,
      faceshow: false,
      //表情列表
      faceList: [],
      //表情文本
      getBrowString: "",
      // 评论框的内容
      comment: "",
      id: "",
      options: [
        {
          value: "标题",
          label: "标题",
        },
        {
          value: "作者",
          label: "作者",
        },
      ],
      value: "",
      query: "",
      emojiShow: false,
      addtiewenvisible: false,
      tiewen: {
        title: "",
        content: "",
        author: "",
        time: "",
        display: "",
        zan: "",
        img: null,
      },
      maxid: "",
      useinfo: {
        id: "",
        name: "",
        age: "",
        sex: "",
        phone: "",
        email: "",
      },
    };
  },
  mounted() {
    this.pickMaxId();
    this.search();
    this.loadEmojis();
  },
  methods: {
    pickMaxId() {
      this.$http.post("http://localhost:8090/Tiewen/pickmaxid").then((res) => {
        //  console.log(res.data.data);
        this.maxid = res.data.data;
      });
    },
    showAllTiewen() {
      this.$http("http://localhost:8090/Tiewen/find").then((res) => {
        console.log(res.data);
        this.itemcontent = res.data;
      });
    },
    search() {
      if (this.value == "标题") {
        this.$http
          .post("http://localhost:8090/Tiewen/findbytitle", {
            title: this.query,
          })
          .then((res) => {
            this.itemcontent = res.data;
            this.$message.success("查询完成");
            this.value = "";
            this.query = "";
            if (this.itemcontent.length == 0) {
              // this.$message.warning("暂没有您要找的内容~");
              this.show = true;
            }
          });
      } else if (this.value == "作者") {
        this.$http
          .post("http://localhost:8090/Tiewen/findbyauthor", {
            author: this.query,
          })
          .then((res) => {
            this.$message.success("查询完成");
            this.itemcontent = res.data;
            this.value = "";
            this.query = "";

            if (this.itemcontent.length == 0) {
              // this.$message.warning("暂没有您要找的内容~");
              this.show = true;
            }
          });
      } else if (this.value == "" && this.query == "") {
        this.showAllTiewen();
      }
    },
    loadEmojis() {
      for (let i in appData) {
        this.faceList.push(appData[i].char);
      }
    },
    getBrow(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.comment += this.getBrowString;
          // this.biaobai.content += this.getBrowString;
        }
      }
      this.faceshow = false;
    },
    getBrow2(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.tiewen.content += this.getBrowString;
          // this.biaobai.content += this.getBrowString;
        }
      }
      this.faceshow = false;
    },
    commented(index) {
      this.commentvisible = true;
      this.id = index;
    },
    // 评论
    send() {
      let name = window.sessionStorage.getItem("tokenname");
      const commentsList = {
        username: name,
        content: this.comment,
        tiewenid: this.id,
      };
      if (this.comment == "") {
        this.$message.warning("评论内容不能为空！");
      } else {
        this.$http
          .post("http://localhost:8090/Tiewen/comment", commentsList)
          .then((res) => {
            if (res.data.code == 0) {
              console.log(res);
              this.search();
              this.$message.success("😉评论成功");
              this.comment = "";
              this.commentvisible = false;
            }
          });
      }
      // this.itemcontent[this.id].commentsList.push(commentsList);
    },
    closedialog(done) {
      this.$confirm("确定取消评论吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          done();
          this.$message({
            type: "info",
            message: "已取消评论",
          });
          this.comment = "";
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 点赞贴文
    dianzan(index, display, zan) {
      console.log(display);
      if (display) {
        display = false;
        zan--;
      } else {
        display = true;
        zan++;
      }
      this.$http
        .post("http://localhost:8090/Tiewen/dianzan", {
          id: index,
          display: display,
          zan: zan,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 0) {
            if (res.data.data.display) {
              this.$message.success("😁感谢您的点赞~");
              this.search();
            } else {
              this.$message.info("😥取消点赞");
              this.search();
            }
          } else {
            this.$message.error("点赞失败!");
          }
        });
    },
    add() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      let time = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      let name = window.sessionStorage.getItem("tokenname");
      let userimg = window.sessionStorage.getItem("tokenimg");
      console.log(userimg);

      // let length = this.itemcontent.length;
      // console.log(length);
      // let tiewenid = this.itemcontent[0].id + 1;
      // console.log(tiewenid);
      this.$http
        .post("http://localhost:8090/Tiewen/addtiewen", {
          id: this.maxid + 1,
          author: name,
          content: this.tiewen.content,
          display: 0,
          tiewencommentsList: [
            {
              content: "",
              tiewenid: this.maxid + 1,
              username: "",
            },
          ],
          time: time,
          title: this.tiewen.title,
          zan: 0,
          img: this.tiewen.img,
          userimg: window.sessionStorage.getItem("tokenimg"),
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success("发布成功！");
            this.search();
            this.addtiewenvisible = false;
          }
        });
    },
    handleClose(done) {
      this.$confirm("取消发布将不会保存信息哦", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          done();
          this.$message({
            type: "info",
            message: "已取消发布",
          });
          this.tiewen.title = "";
          this.tiewen.content = "";
          this.faceshow = false;
          this.tiewen.img = "";
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    uploadover(res) {
      console.log(res);

      this.tiewen.img = res.msg;
    },
    findinfo(name) {
      console.log(name);
      this.$http
        .post("http://localhost:8100/students/findinfo", { name: name })
        .then((res) => {
          this.useinfo = res.data;
          // console.log(res);
          console.log(this.useinfo);
        });
    },
  },
};
</script>
<style scoped>
/* 发布按钮 */
.add {
  position: fixed;
  background-color: #d1762f;
  bottom: 40px;
  color: white;
  letter-spacing: 1.5;
  right: 50px;
  border-radius: 10px;
}
.top {
  text-align: center;
  /* position: fixed;
  top: 10px;
  left: 50%;
  margin-left: -150px; */
  margin-top: 10px;
}
.query {
  width: 250px;
}
.el-select {
  width: 90px;
  margin-right: 10px;
}
.search {
  background-color: #fff;
  /* border: gray 1px solid; */
}
.search:hover {
  background-color: rgb(228, 224, 224);
}
.show {
  color: rgb(247, 10, 10);
}
li {
  list-style: none;
  margin-top: 0px;
}
.line {
  width: 100%;
  height: 1px;
  background-color: rgb(211, 209, 209);
  margin: 10px auto;
}
.contentbox {
  width: 100%;
  /* height: fit-content; */
  background-color: #f2efe8;
  overflow: hidden;
}
.item {
  width: 80%;
  /* height:200px; */
  /* background-color: rgba(151, 148, 148, 0.3); */
  background: url(../assets/image/tiewenbeijing.png);
  margin: 5px auto;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  position: relative;
}
.zhen {
  position: absolute;
  right: -16px;
  top: -28px;
  rotate: 180deg;
}
.el-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.header {
  display: flex;
  margin-bottom: 15px;
  /* border-bottom: 1px solid gray; */
}
.tiewentime {
  color: rgb(156, 155, 155);
  font-size: 12px;
  margin-top: 5px;
}
.footer {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
}
.operation {
  margin-left: 20px;
  cursor: pointer;
}
.icon {
  margin-right: 3px;
}
.content {
  margin-left: 0px;
  height: fit-content;
}
/* .title {
  width: 80%;
  height: 40px;
  background-color: #fff;
  text-align: center;
  margin: 10px auto;
} */
/* 评论界面 */
.operation1 {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  margin-left: 15px;
}
.expression {
  margin-right: 30px;
}
.send {
  cursor: pointer;
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  background-color: #5c6064;
}
.send:hover {
  background-color: #36383a;
}
/* .title {
  width: 80%;
  height: 40px;
  background-color: #fff;
  text-align: center;
  margin: 10px auto;
} */
/* 表情样式 */
.browBox {
  width: 100%;
  height: 200px;
  background: #e6e6e6;
  position: absolute;
  z-index: 100;
  bottom: 0px;
  overflow: scroll;
}
.faceList {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
.faceList li {
  cursor: pointer;
  width: 10%;
  font-size: 26px;
  list-style: none;
  text-align: center;
}

.submit-btn {
  margin: 0 15px 10px 0;
  float: right;
}
/* 表情 */
.face {
  /* width: 10px; */
  padding: 5px;
  background-color: rgb(175, 172, 172);
  margin-right: 20px;
}
.title {
  margin-right: 8px;
  color: blue;
  font-style: italic;
  cursor: pointer;
}
.extra {
  display: flex;
}
.uploadimg {
  width: 50px;
}
/* 弹出信息框 */
.userid {
  margin-bottom: 6px;
}
.userid span {
  font-weight: 700;
  margin-right: 4px;
}
</style>
